import React from 'react'
import  {useDispatch} from  "react-redux";
import { Form, Input, Button, Checkbox,message} from 'antd';
import UserService from "../model/user/Service"
import {initUser} from "../action/userAction"
import "../css/login.css"

export default function Login(props:any) {

  const dispatch = useDispatch();

  const onFinish = async (info: any) => {

    let { username, password } = info;
    let { data } = await UserService.login({ username, userpwd: password });
    console.log(data);
    if (data.code == 1) {
      let info = data.token;
      window.localStorage.setItem("userinfo",info);//放在本地
      message.success('登陆成功');
      dispatch(initUser(info));
      props.history.push("/list");
    } else {
      message.error('用户名和密码不匹配');
    }


  };

  const onFinishFailed = () => {
    message.error('请检查红色的错误提示');
  };
    return (
        <div>
            
      <div className="login">
        <p>欢迎登录</p>
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="on"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' },
        { pattern: /^[a-z_$][a-z_$0-9]{2,9}$/i, message: '请输入数字字母_$组成不能以数字开头长度3到10位' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' },
        { pattern: /^[a-z_$0-9]{3,10}$/i, message: '请输入数字字母_$组成长度3到10位' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit"  onClick={()=>{
             
        }}>
          登录
        </Button>
      </Form.Item>
    </Form>
    </div>
        </div>
    )
}
